<template>
	<view>
		<MyItem
			name="宣传大使" 
			iconFileName="publicityIcon.png"
			:clickFun="goPublicityPage"
			iconBgc="#DC3855"/>
		<MyItem 
			name="关于平台" 
			iconFileName="aboutUs.png" 
			url="/pages/User/AboutUs/AboutUs?systemId=1" 
			iconBgc="#80D4D4"/>
		<MyItem
			name="版本1.7.1" 
			iconFileName="appLog.png" 
			url="/pages/User/AboutUs/AboutUs?systemId=2" 
			iconBgc="#3B4F68"/>
		<MyItem 
			name="人工客服" 
			iconFileName="support.png" 
			:clickFun="openContactFun"
			iconBgc="#629CA4"/>
		<MyPopub itemPadding="0rpx" height="100rpx" :isOpenPopub="openContactPopubFlag" :slotsNums="1">
			<template #1>
				<button @click="closeContactPupub" class="invite_joiner" open-type="contact">打开客服会话</button>
			</template>
		</MyPopub>
	</view>
</template>

<script setup>
	import MyItem from '@/components/MyItem/MyItem.vue'
	import MyPopub from '@/components/MyPopub/MyPopub.vue'
	import { ref } from "vue";
	
	import {verifyIsLogin} from '@/hooks/verify.js'
	
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	
	const {
		primary_text_color
	} = dynamicStyle_store.dormitoryStyle
	
	const openContactPopubFlag=ref(0)
	const openContactFun=()=>{
		openContactPopubFlag.value=Math.random()
	}
	const closeContactPupub=()=>{
		openContactPopubFlag.value=-Math.random()
	}
	const goPublicityPage=()=>{
		verifyIsLogin()
		uni.navigateTo({
			url:'/pages/User/Publicity/Publicity'
		})
	}
</script>

<style lang="less">
	.invite_joiner{
		margin: 0 !important;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF !important;
		color: v-bind(primary_text_color);
		border: 0px solid #FFFFFF !important;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	button::after {
	   border: none;
	}
</style>